<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
    <title>商品分类</title>
    <style>
        * {padding:0;margin:0;font-size:14px}
        img {border:0 none}
        button {height:26px;padding:5px}

        /*标题栏*/
        .title {
            height:30px;
            line-height:30px;
            border-bottom:1px solid #efefef;
            background-color:#0b58a2;
            font-weight:bold
        }

        /*查询栏*/
        .qry {
            height:35px;
            line-height:35px;
            border-bottom:1px solid #efefef;
            background-color: #addfee;
        }

        /*按钮兰*/
        .bar {
            height:26px;
            line-height:26px
        }

        /*数据栏*/
        .data {

        }

        .data table {
            width:100%;
            border:1px solid #efefef;
            border-collapse:collapse;
        }

        .data .page {
            height:30px;
            background-color: #ccedea;
            text-align:center
        }
    </style>
    <script src = 'script/jquery-1.12.4.min.js'></script>
    <script>
        /*
            Math.floor()        舍去小数
            Math.ceil()         舍去小数 + 1
            Math.round()        四舍五入

            Math.random()       随机值 0 - 1

            Math.max()          取最大值
            Math.min()          取最小值

            Math.abs()          取绝对值
        */

        //表格的数据 | 总的页数 | 默认每页笔数 | 当前是第几页
        var grid_data, grid_page = 0, page_num = 5, page = 0;
        //表格的对象
        var grid_obj;
        //清除数据
        var clear = function() {
            //如果表格的行数 > 1的话
            while (grid_obj.rows.length > 1) {
                grid_obj.deleteRow(-1);
            }
        };
        //填充数据
        var fill = function(d) {
            var row = grid_obj.insertRow(-1);//tr

            var cell1 = row.insertCell(-1);
            cell1.style.textAlign = 'right';
            cell1.innerText = d.id;

            var cell2 = row.insertCell(-1);
            cell2.innerText = d.name;

            var cell3 = row.insertCell(-1);
            cell3.style.textAlign = 'center';
            //状态 0:禁用 1:启用 2:删除
            var _text = '';
            switch (d.status) {
                case 0:
                    _text = '禁用';
                    break;
                case 1:
                    _text = '启用';
                    break;
                case 2:
                    _text = '删除';
                    break;
            }
            cell3.innerText = _text;

            var cell4 = row.insertCell(-1);
            cell4.style.textAlign = 'center';
            cell4.innerHTML = '<button>修改</button><button>删除</button>';
        };


        //分页的方法 默认每页10笔数据
        var goPage = function(p) {
            //记录当前页数
            page = p;
            //一共有几页
            grid_page = Math.ceil(grid_data.length / page_num);

            //先清除数据
            clear();

            //填充数据
            var start = (p - 1) * page_num;
            for (var i = start; i < start + page_num; i++) {
                if (grid_data[i]) {
                    fill(grid_data[i]);
                }
            }

            document.getElementById('spaNum').innerText = page;
            document.getElementById('spaAll').innerText = grid_page;

/*
            (i - 1) * 10

            页数    开始位置
            1           1   [0]
            2           11  [10]
            3           21  [20]
            4           31  [30]*/
        };

        //页面加载完成
        window.onload = function() {
            grid_obj = document.getElementById('cateGrid');

            //要获取服务后台的数据库中的商品分类的数据
            //回调方法
            //  向后台请求完成之后 所要调用的方法或事件 d -> 就是服务端 返回 页面的数据
            $.getJSON('cate.txt', {}, function(d) {
                    if (d) {
                    grid_data = d.data;
                    page = 1;
                    goPage(page);
                }
            });

            //分页按钮事件
            document.getElementById('btnHome').onclick = function() {
                if (1 == page) {
                    alert('已经是第一页!');
                    return false;
                } else {
                    goPage(1);
                }
            };
            document.getElementById('btnPrev').onclick = function() {
                if (1 == page) {
                    alert('已经是第一页!');
                    return false;
                } else {
                    goPage(--page);
                }
            };
            document.getElementById('btnNext').onclick = function() {
                if (page == grid_page) {
                    alert('已经到最后一页!');
                    return false;
                } else {
                    goPage(++page);
                }
            };
            document.getElementById('btnLast').onclick = function() {
                if (page == grid_page) {
                    alert('已经到最后一页!');
                    return false;
                } else {
                    goPage(grid_page);
                }
            };
            //分页按钮事件

            document.getElementById('selPageNum').onchange = function() {
                page_num = this.value;
                goPage(1);
            };
        };
    </script>
</head>
<body>
    <div class = 'title'>商品分类管理</div>
    <div class = 'qry'>
        分类名称 : <input type = 'text' />
        <button>查询</button>
    </div>
    <div class = 'data'>
        <div class = 'bar'>
            <button>新增分类</button>
        </div>
        <table id = 'cateGrid' border = 1>
            <tr>
                <th style = 'width:10%'>ID</th>
                <th style = 'width:50%'>名称</th>
                <th style = 'width:10%'>状态</th>
                <th style = 'width:30%'>操作</th>
            </tr>
        </table>
        <div class = 'page'>
            <button id = 'btnHome'>首页</button>
            <button id = 'btnPrev'>上页</button>
            &nbsp;第<span id = 'spaNum'></span>页 / 一共有<span id = 'spaAll'></span>页&nbsp;
            <button id = 'btnNext'>下页</button>
            <button id = 'btnLast'>末页</button>
            每页<select id = 'selPageNum'><option value = 5>5</option><option value = 10>10</option><option value = 20>20</option></select>笔
        </div>
    </div>
</body>
</html>